<template>
	<view>
		<image style="width: 100%;"
			:src="imageHandle(good.imagine)">
		</image>
		<view :style="{top:Artop+5+'px'}" class="back" @tap="toBack">
			<u-icon name="arrow-left" size="15" color="black"></u-icon>
		</view>
		<view class="text">{{good.name}}</view>
		<view class="desc">{{good.desc}}</view>
		<view class="price_number">
			<view class="left">￥{{good.price}}</view>
			<view class="right">
					<u-number-box step="1" :min="0" disabled-input="true" v-model="good.num"
						:showMinus="good.num > 0" @change="changeGood(good)">
						<view slot="minus" class="minus">
							<u-icon name="minus" size="10"></u-icon>
						</view>
						<text slot="input" style="width: 20px;text-align: center;" class="input"
							v-show="good.num>0">{{good.num}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="10"></u-icon>
						</view>
					</u-number-box>
			</view>
		</view>
		
		<view class="buy_bottom">
			<view class="buy_box">
				<view class="left" @tap="shopCart">
					<view class="img">
						<u-badge :value="count" :offset="[0,-15]" absolute="true" style="font-size: 5px;"
							:max="99"></u-badge>
						<image :src="count>0?'../../static/gouwuche-copy.png':'../../static/gouwuche-copy (1).png'">
						</image>
					</view>
					<view class="price">￥{{amount}}</view>
				</view>
				<view class="right" v-show="amount>0" @tap="$u.throttle(toBuy, 500)">去结算</view>
			</view>
		</view>

		<u-popup :show="sub_show" mode="bottom" @close="sub_close"  :closeable="true"
			overlayOpacity="0.8" :round="10">
			<u-toast ref="uToast1"></u-toast>
			<view :style="{height:windowsHeight*0.9+'px'}" class="pop">
				<view class="order_bottom">
					<view class="buy_box">
						<view class="left">
		
							<view class="price" style="margin-left: 25px;">合计￥{{amount}}</view>
						</view>
						<view class="right" @tap="$u.throttle(toPay, 500)">提交订单</view>
					</view>
				</view>
				<view style="height: 44px;"></view>
				<view class="sub_order_box" :style="{height:windowsHeight*0.9-44+'px'}">
					<u-list>
						<u-cell :icon="imageHandle(good.imagine) "  :label="'×'+good.num"
							iconStyle="width: 50px;height: 50px;border-radius: 5px;" :border="false"
							v-for="good in goodCart" :key="good.id">
							<view class="title" slot="title">
								{{good.name}}
							</view>
							<view class="price" slot="value">
								￥{{good.price}}
							</view>
						</u-cell>
						<u-cell title="桌号" :value="tableId+'号桌'"></u-cell>
						<u-cell title="总计" titleStyle="font-size: 20px;" style="margin-bottom: 80px;"
							customStyle="padding-bottom: 180px;">
							<view style="font-size: 20px;" slot="value">￥{{amount}}</view>
						</u-cell>
					</u-list>
				</view>
			</view>
		</u-popup>
		
		
		<u-popup :show="add_good_show" mode="bottom" @close="add_good_close"  :closeable="true"
			overlayOpacity="0.8" :round="10" zIndex="998">
			<view :style="{height:windowsHeight*0.5+'px'}" class="pop ">
				<view style="height: 44px;"></view>
				<view class="sub_order_box" :style="{height:windowsHeight*0.5-44+'px'}">
					<u-list width="100%" height="100%">
						<view class="u_cell" v-for="good in goodCart" :key="good.id">
		
							<u-cell :icon="imageHandle(good.imagine)" iconStyle="width: 50px;height: 50px;border-radius: 5px;"
								:border="false">
								<view class="title" slot="title">
									{{good.name}}
								</view>
								<view class="price" slot="label">
									￥{{good.price}}
								</view>
								<u-number-box v-model="good.num" step="1" :min="0" :showMinus="good.num > 0"
									slot="value"  @change="changeGood(good)">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="10"></u-icon>
									</view>
									<text slot="input" style="width: 20px;text-align: center;" class="input"
										v-show="good.num > 0">{{good.num}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="10"></u-icon>
									</view>
								</u-number-box>
							</u-cell>
						</view>
					</u-list>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import config from '@/config.js'
	import {
		subOrder
	} from '@/config/api.js'
	export default {
		data() {
			return {
				Artop: 0,
				add_good_show:false,
				sub_show:false,
				windowsHeight:0
			}
		},
		methods: {
			imageHandle(imgSrc) {
				return config.baseURL + imgSrc + "";
			},
			shopCart() {
				this.add_good_show = true
			},
			toBack(){
				uni.navigateBack()
			},
			sub_close() {
				this.sub_show = false
			
			},
			add_good_close() {
				this.add_good_show = false
			},
			shopCart() {
				this.add_good_show = true
			},
			toBuy() {
				this.sub_show = true
			},
			toPay() {
				//请求数据
				subOrder( {"goodCart":this.$store.state.goodCart,
							"tableId":this.$store.state.tableId} 
				).then((res) => {
					if(res.code==200){
						uni.navigateTo({
							url: '/pages/pay/pay?order='+encodeURIComponent(JSON.stringify(res.data.order))
						})
					}else{
						this.$refs.uToast1.show({
							type: 'error',
							message: res.msg,
							duration: "1500",
							complete(e){
								uni.navigateTo({
									url: '/pages/orderDetail/orderDetail?orderId='+encodeURIComponent(JSON.stringify(res.data))
								})
							}
						})
					}
				})
			},
			changeGood(e) {
				setTimeout(() => {
					if (e.num == 0) {
						this.$store.state.goodCart.forEach((item, index) => {
							if (item.id == e.id) {
								this.$store.state.goodCart.splice(index, 1)
							}
						})
					} else {
						if (this.$store.state.goodCart.length <= 0) {
							this.$store.state.goodCart.push(e);
							return;
						}
						var flag = true;
						this.$store.state.goodCart.forEach((item, index) => {
							if (item.id == e.id) {
								item.num = e.num;
								flag = false;
							}
						})
						if (flag)
							this.$store.state.goodCart.push(e);
					}
				}, 30)
			}
		},
		computed:{
			...mapState(["goodCart","amount","count","good","tableId"]),
		},
		onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowsHeight = res.windowHeight
					this.Artop = res.safeArea.top
				}
			})
		}
	}
</script>

<style lang="scss">
	.pop {
		background-color: #f4f4f4;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
	
	
	
		.sub_order_box {
			width: 95%;
			height: auto;
			background-color: white;
			margin: 0 auto;
			border-radius: 10px;
			.u_cell:last-child {
				margin-bottom: 75px;
			}
	
			.minus {
				width: 15px;
				height: 15px;
				opacity: 0.8;
				border-width: 1px;
				border-color: #E6E6E6;
				border-top-left-radius: 100px;
				border-top-right-radius: 100px;
				border-bottom-left-radius: 100px;
				border-bottom-right-radius: 100px;
				@include flex;
				justify-content: center;
				align-items: center;
			}
	
			.input {
				padding: 0 10px;
				height: 15px;
				font-size: 12px;
			}
	
			.plus {
				width: 15px;
				height: 15px;
				background-color: #FF0000;
				border-radius: 50%;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
			}
	
			.title {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-right: 50px;
			}
	
			.price {
				color: red;
	
			}
		}
	}
	
	.price_number{
		width:85%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-top: 8px;
		.left{
			font-size: 30px;
			color:red
		}
		.right{
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -10px;
				height: 100%;
				width: auto;
				background-color: white;
			
				.minus {
					width: 20px;
					height: 20px;
					opacity: 0.8;
					border-width: 1px;
					border-color: #E6E6E6;
					border-top-left-radius: 100px;
					border-top-right-radius: 100px;
					border-bottom-left-radius: 100px;
					border-bottom-right-radius: 100px;
					@include flex;
					justify-content: center;
					align-items: center;
				}
			
				.input {
					padding: 0 10px;
					height: 20px;
					font-size: 14px;
				}
			
				.plus {
					width: 20px;
					height: 20px;
					background-color: #FF0000;
					border-radius: 50%;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;
				}					
		}
	}
	
	.back {
		position: absolute;
		background-color: white;
		width: 30px;
		height: 30px;
		left: 20px;
		top: 23px;
		border-radius: 20px;
		opacity: 0.95;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.text{
		width: 90%;
		margin: 0 auto;
		font-size:22px;
		font-weight: bold;
		margin-top: 20px;
	}
	.desc{
		width: 90%;
		margin: 0 auto;
		font-size:15px;
		color: #d0d0d0;
		margin-top: 8px;
		text-indent: 2em;
	}
	.buy_bottom,
	.order_bottom {
		position: absolute;
		width: 100%;
		height: 50px;
		z-index: 999;
		bottom: 10px;
	
		.buy_box {
			height: 100%;
			width: 85%;
			background-color: black;
			margin: 0 auto;
			border-radius: 25px;
			display: flex;
			overflow: hidden;
	
			.left {
				width: 70%;
				height: 100%;
				display: flex;
	
				.img {
					position: relative;
					width: 50px;
					height: 50px;
					margin-left: 25px;
					image {
						width: 100%;
						height: 100%;
					}
	
				}
	
				.price {
					color: red;
					line-height: 50px;
					font-size: 20px;
					margin-left: 5px;
					color: white;
				}
			}
	
			.right {
				width: 30%;
				height: 100%;
				background-color: #FF0000;
				line-height: 50px;
				text-align: center;
				color: white;
			}
		}
	}
</style>